<script setup>
import {
    Delete,
    Edit,
    Star,
  } from '@element-plus/icons-vue';
  import { useUser } from '@/stores';
  let user = useUser();
  let prop = defineProps(['shou','shan','list','title'])
  let emit = defineEmits(['update:shou','update:shan']);
  function shou(){
    user.addCun({list:prop.list,title:prop.title});
  }
</script>
<template>
    <div class="box">
        <div class="list">{{ list }}</div>
        <div class="title">{{ title }}</div>
        <div class="ss"><slot></slot></div>
        <div class="btn">
            <el-button type="primary" :icon="Edit" circle />
            <el-button type="warning" :icon="Star" @click="shou" circle />
            <el-button type="danger" :icon="Delete" @click="user.removCun(list)" circle />
        </div>
        
    </div>
</template>
<style scoped>
.box{
    min-width: 135px;
    height: 240px;
    padding: 0 20px;
    border: #ccc 1px solid;
    box-shadow: -2px 2px 10px #eee;
    position: relative;
}
.list{
    width: 100%;
    height: 30px;
    border-bottom: #ccc 1px solid;
    font-size: 16px;
    font-weight: bold;
    line-height: 30px;
}
.title{
    width: 100%;
    color: #7a7878;
    margin-top: 20px;
}
.ss{
    width: 100%;
    position: absolute;
    bottom: 10px;
    margin-left: 30px;
}
.btn{
    position: absolute;
    bottom: 8px;
    padding: 0 10px;
}
</style>